<!--历史地震数据-->
<template>
  <div id="baiduMap" @touchstart.passive="true">
    <baidu-map id="map"
               :zoom="map.zoom"
               :center="{lng: map.center.lng, lat: map.center.lat}"
               :scroll-wheel-zoom="true">
      <bm-view id="map"></bm-view>
      <bm-control :offset="{width: '10px', height: '10px'}">
        <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
          <input placeholder="请输入地名关键字"> <!-- 这里指代一个自定义搜索框组件 -->
        </bm-auto-complete>
      </bm-control>
      <bm-local-search :keyword="keyword" :auto-viewport="true" ></bm-local-search>
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: "MachineLearning",
  data() {
    return {
      points: [],
      map: {
        center: {
          lng: 106.663408,
          lat: 26.589004
        },
        zoom: 12
      },
      keyword: '公司'
    };
  },

};
</script>

<!--css-->
<style scoped>

#baiduMap{
  height: 98%;
  width: 98%;
  margin: 5px auto;
  box-shadow: 8px 8px 20px 20px rgba(255, 255, 255, 0.6);
}
#baiduMap #map {
  width: 100%;
  height: 100%;
}
#baiduMap #map input{
  margin-left: 1%;
  border: #d8d8d8 solid 1px;
}

</style>